<!--
 * @Author: Mr.Cong Wei
 * @Date: 2022-03-29 12:18:43
 * @LastEditTime: 2022-07-22 16:03:20
-->
<template>
  <div class="flex flex-col h-full">
    <div class="w-full h-12 fixed top-0 z-10">
      <IVHeader @reload="reload" />
    </div>
    <div class="h-6 w-full pl-36 largeTS logo_color bg-white">物资管理平台</div>
    <div class="flex w-full flex-1 relative bg-[#f5f5f5]">
      <div class="w-[355px] fixed top-[48px]">
        <Sider />
      </div>
      <div
        class="flex-1 mt-[44px] ml-[347px] bg-white overflow-auto"
        :style="{
          height: contentHeight - 68 + 'px',
          width: contentWidth - 355 + 'px'
        }"
      >
        <router-view v-if="isRouterAlive" v-slot="{ Component }">
          <keep-alive :exclude="keepAliveExclude">
            <component :is="Component" :key="route.matched[1]?.path ?? route.path" />
          </keep-alive>
        </router-view>
        <!-- <router-view v-if="isRouterAlive"></router-view> -->
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { nextTick, onBeforeMount, onMounted, reactive, ref, toRefs } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import useKeepAliveHook from '../store/keepAlive'
import Sider from './sider.vue'
import IVHeader from './header.vue'

export default {
  name: 'Layouts',
  components: {
    Sider,
    IVHeader
  },
  setup() {
    const keepAliveStore = useKeepAliveHook()

    const { keepAliveExclude } = storeToRefs(keepAliveStore)
    const data: any = reactive({
      contentHeight: 100,
      contentWidth: 100
    })
    const refData = toRefs(data)
    const route = useRoute()
    const router = useRouter()
    const isRouterAlive = ref(true)
    const reload = () => {
      isRouterAlive.value = false
      nextTick(() => {
        isRouterAlive.value = true
      })
    }
    onBeforeMount(() => {
      const height = document.documentElement.clientHeight
      const width = document.documentElement.clientWidth
      data.contentHeight = height
      data.contentWidth = width
    })
    onMounted(() => {
      window.onresize = function () {
        const height = document.documentElement.clientHeight
        const width = document.documentElement.clientWidth
        data.contentHeight = height
        data.contentWidth = width
      }
    })

    return {
      ...refData,
      isRouterAlive,
      keepAliveExclude,
      reload,
      route,
      router
    }
  }
}
</script>

<style lang="scss" scoped>
.logo_color {
  color: #004487;
}
</style>
